<template>
  <div class="teamPayroll">
    <div class="breadcrumb">
      <a-button @click="returnBack">返回</a-button>
    </div>
    <div class="title">
      <div class="title_top flexBetween" style="margin-bottom:10px">
        <div>
          <span style="font-size:22px;font-Weight:600">{{this.getData.teamName}}</span>
        </div>
        <div>
          <a-dropdown-button @click="handleButtonClick">
            <a-menu slot="overlay" @click="handleMenuClick">
              <!-- <a-menu-item key="1">
                <a-icon type="edit" />编辑
              </a-menu-item>-->
              <a-menu-item key="2">
                <a-icon type="delete" />删除
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
      </div>
      <div style="color:#999">
        <span>操作人：</span>
        <span>{{this.getData.createFullName}}</span>
        <span style="margin-left:30px;">更新时间：</span>
        <span>{{moment(this.getData.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
      </div>
    </div>
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">工资月份</div>
        <div class="top_content_content">{{this.getData.wageMonth}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">人数统计</div>
        <div class="top_content_content">{{this.getData.personTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">工资统计（元）</div>
        <div class="top_content_content">{{this.getData.wageTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">进度</div>
        <div
          class="top_content_content"
          style="color:#1890FF"
          v-if="this.getData.payStatus!=1&&this.getData.confirmStatus!=1"
        >工资确认</div>
        <div
          class="top_content_content"
          style="color:#1890FF"
          v-if="this.getData.payStatus!=1&&this.getData.confirmStatus==1"
        >银行支付</div>
        <div class="top_content_content" style="color:#1890FF" v-if="this.getData.payStatus==1">已完成</div>
      </div>
    </div>
    <div class="wageCheck">
      <div class="uploadTittle">工资确认凭证</div>
      <div class="uploadContent" v-if="this.getData.confirmStatus!=1">
        <div>
          <a-button style="width:150px;color:#ccc" type="dashed" icon="plus" @click="showModal"></a-button>
        </div>
        <div style="color:#999;font-size:16px;font-weight:500">请上传工资确认单、考勤表或其他相关凭证</div>
      </div>
      <div class="uploadList" v-if="this.getData.confirmStatus==1">
        <ul>
          <li
            v-for="(item,index) in form.ulfileInfoList"
            :key="index.uid"
            @click="pdfModal(item)"
          >{{item.name}}</li>
        </ul>
        <div style="position:absolute;right:25px;bottom:5px">
          <a-dropdown-button>
            <a-menu slot="overlay" @click="handleWage">
              <a-menu-item key="1">
                <a-icon type="edit" />编辑
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="delete" />删除
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
      </div>
      <div v-if="this.getData.confirmStatus!=1" class="imgFlag">
        <img src="@/assets/img/detail.png" alt />
      </div>
      <div v-if="this.getData.confirmStatus==1" class="imgFlag">
        <img src="@/assets/img/success.png" alt />
      </div>
    </div>
    <div class="bankPay">
      <div class="uploadTittle">银行支付凭证</div>
      <div class="uploadContent" v-if="this.getData.payStatus!=1">
        <div>
          <a-button style="width:150px;color:#ccc" type="dashed" @click="showModal2" icon="plus"></a-button>
        </div>
        <div style="color:#999;font-size:16px;font-weight:500">请在银行支付完成后上传凭证</div>
      </div>
      <div v-if="this.getData.payStatus!=1" class="imgFlag">
        <img src="@/assets/img/detail.png" alt />
      </div>
      <div v-if="this.getData.payStatus==1" class="imgFlag">
        <img src="@/assets/img/success.png" alt />
      </div>
      <div class="uploadList" v-if="this.getData.payStatus==1">
        <ul>
          <li
            v-for="item in formBank.ulfileInfoList"
            :key="item.uid"
            @click="pdfModal(item)"
          >{{item.name}}</li>
        </ul>
        <div style="position:absolute;right:25px;bottom:5px">
          <a-dropdown-button>
            <a-menu slot="overlay" @click="handleBank">
              <a-menu-item key="1">
                <a-icon type="edit" />编辑
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="delete" />删除
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div
      style="padding: 10px 30px;background: #fff;font-size:18px;font-weight:600;color:#000;"
    >工资单数据</div>
    <div class="atable">
      <div class="flexBetween" style="margin-bottom:10px">
        <div>
          <span>班组人数：</span>
          <span>{{this.getData.personTotal}}</span>
          <span style="margin-left:50px">工资合计：</span>
          <span>{{this.getData.wageTotal}}元</span>
          <span style="margin-left:50px">提交人：</span>
          <span>{{this.getData.reportCreateFullName||this.getData.createFullName}}</span>
          <span
            style="margin-left:10px"
          >{{moment(this.getData.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
        <div>
          <a-button @click="exportTable">导出工资单</a-button>
        </div>
      </div>
      <div class="modalTable">
        <a-table :columns="modalcolumns" :data-source="modaldata" :pagination="false">
          <a slot="fullName" slot-scope="text,record" @click="onDetail(record)">{{ text }}</a>
          <a
            slot="signUrl"
            slot-scope="text, record"
            v-if="record.signType==1"
            @click="onSignImg(record.signUrl)"
          >
            <!-- 照片旋转270度 -->
            <div style="height:30px;" class="flexCenter2">
              <img :src="record.signUrl" alt width="30px" style="transform: rotate(270deg);" />
            </div>
            <!-- <img :src="record.signUrl" alt style="transform: rotate(270deg);width:30px;" /> -->
          </a>
          <a v-else slot="signUrl" slot-scope="text,record">
            <span v-if="record.fileInfoList" @click="signImgClick(record.fileInfoList)">签字照片</span>
            <span v-else @click="noImg">签字照片</span>
          </a>
        </a-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="this.configFun.pageNum(total)"
          show-size-changer
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
            <!-- <span v-if="props.value === '40'">全部</span> -->
          </template>
        </a-pagination>
      </div>
    </div>

    <!-- 上传工资单确认框 -->
    <div class="amodal">
      <a-modal
        v-model="visibleUpload1"
        :title="modalTitle"
        :maskClosable="false"
        width="645px"
        @ok="handleOk"
        @cancel="handCancel"
      >
        <div v-if="modalTitle=='银行支付凭证'">
          <a-form-model ref="ruleForm2" :model="formBank" :rules="rules2" v-if="visibleUpload1">
            <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol"-->
            <a-form-model-item label="工资支付日期" prop="date">
              <a-date-picker
                v-model="formBank.date"
                type="date"
                placeholder="请选择日期"
                style="width: 100%;"
              />
            </a-form-model-item>
            <!-- <a-spin :spinning="spinning"> -->
            <a-form-model-item label="银行支付凭证" prop="formUpload2">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList2"
                :show-upload-list="false"
              >
                <a-button>
                  <a-icon type="upload" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
              <a-spin :spinning="spinning">
                <div v-for="(item,index) in formBank.fileInfoList" :key="index" class="pdfList">
                  <a-icon type="file-pdf" style="color:#1890ff;margin-right:20px" />
                  <span style="margin-right:20px">{{item.name}}</span>
                  <a-icon type="delete" class="delete" @click="pdfDelete2(item.uid)" />
                </div>
              </a-spin>
            </a-form-model-item>
            <!-- </a-spin> -->
          </a-form-model>
        </div>
        <div v-if="modalTitle=='凭证登记'">
          <a-form-model ref="ruleForm" :model="form" :rules="rules" v-if="visibleUpload1">
            <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol"-->
            <!-- <a-spin :spinning="spinning"> -->
            <a-form-model-item label="工资确认单" prop="formUpload">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :default-file-list="defaultFileList"
                :show-upload-list="false"
              >
                <a-button>
                  <a-icon type="upload" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
              <a-spin :spinning="spinning">
                <div v-for="(item,index) in form.fileInfoList" :key="index" class="pdfList">
                  <a-icon type="file-pdf" style="color:#1890ff;margin-right:20px" />
                  <span style="margin-right:20px">{{item.name}}</span>
                  <a-icon type="delete" class="delete" @click="pdfDelete(item.uid)" />
                </div>
              </a-spin>
            </a-form-model-item>
            <!-- </a-spin> -->
          </a-form-model>
        </div>
      </a-modal>
    </div>

    <!-- 删除对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visibleDelete"
        title="删除"
        :maskClosable="false"
        width="645px"
        :footer="null"
      >
        <div
          class="tipWord"
        >正在删除{{this.getData.teamName}}，该操作不可逆，一旦操作成功，{{this.getData.teamName}}的数据将会删除。请输入下面内容再次确认操作。</div>
        <div style="margin-bottom:20px">请在下发输入框输入“{{this.getData.teamName}}”以确认操作</div>
        <div style="margin-bottom:20px">
          <a-input v-model="formDelete.content" />
        </div>
        <div>
          <a-button style="color:red;width:100%;margin-bottom:30px" @click="checkDelete">确认删除</a-button>
        </div>
      </a-modal>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visiblePdf"
        title
        @ok="handleOkPdf"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        :centered="true"
        :bodyStyle="{textAlign:'center'}"
        v-if="visiblePdf"
        key="modalpdf"
        class="pdfModal"
      >
        <embed v-if="visiblePdf" width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>

    <!-- 展示签字照片对话框 -->
    <div class="signImgModal">
      <a-modal
        v-model="visibleImg"
        title="签字照片"
        @ok="handleOkImg"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="800px"
      >
        <div style="padding-left:38px">
          <viewer :images="this.signImgData" class="flexBetween" style="flex-wrap:wrap">
            <div v-for="(src,index) in this.signImgData" :key="index" style="margin-right:38px">
              <img :src="src" width="200px" height="200px" />
            </div>
          </viewer>
        </div>
      </a-modal>
    </div>

    <!-- 展示手写签字对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visibleSign"
        title="签字照片"
        @ok="handleOkSignImg"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="800px"
      >
        <!-- 照片旋转270度 -->
        <div style="transform: rotate(270deg);height:400px" class="flexCenter2">
          <img :src="this.handSignImg" alt width="400px" height="800px" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { uploadOSS } from '@/utils/oss.js'
import { message } from 'ant-design-vue'
import { teamWageGet, teamWageUpload, teamWageExport, teamWageDelete } from '@/api/teamWageSheet'
import moment from 'moment'

const modalcolumns = [
  {
    title: '序号',
    dataIndex: 'order',
    key: 'order',
    align: 'center'
  },
  {
    title: '姓名',
    dataIndex: 'fullName',
    key: 'fullName',
    scopedSlots: { customRender: 'fullName' },
    align: 'center'
  },
  {
    title: '岗位',
    dataIndex: 'postName',
    key: 'postName',
    align: 'center'
  },
  {
    title: '薪酬方式',
    dataIndex: 'contractType',
    key: 'contractType',
    align: 'center'
  },
  {
    title: '合同工资',
    dataIndex: 'contractWage',
    key: 'contractWage',
    align: 'center'
  },
  {
    title: '出勤天数',
    dataIndex: 'workDays',
    key: 'workDays',
    align: 'center'
  },
  {
    title: '核定工资',
    dataIndex: 'payableWage',
    key: 'payableWage',
    align: 'center'
  },
  {
    title: '工资确认签字',
    dataIndex: 'signUrl',
    key: 'signUrl',
    scopedSlots: { customRender: 'signUrl' },
    align: 'center'
  }
]
const modaldata = [
  {
    key: '0',
    order: '1',
    name: '王千禧',
    work: '普工',
    wages: '7500',
    day: 27,
    check: '7500',
    sign: ''
  },
  {
    key: '1',
    order: '2',
    name: '王千禧',
    work: '普工',
    wages: '7500',
    day: 27,
    check: '7500',
    sign: ''
  },
  {
    key: '2',
    order: '3',
    name: '王千禧',
    work: '普工',
    wages: '7500',
    day: 27,
    check: '7500',
    sign: ''
  },
  {
    key: '3',
    order: '4',
    name: '王千禧',
    work: '普工',
    wages: '7500',
    day: 27,
    check: '7500',
    sign: ''
  },
  {
    key: '4',
    order: '5',
    name: '王千禧',
    work: '普工',
    wages: '7500',
    day: 27,
    check: '7500',
    sign: ''
  }
]
export default {
  data() {
    let formUpload = (rule, value, callback) => {
      if (this.iswageModal === false) {
        callback(new Error('请上传文件'))
      } else {
        this.$refs.ruleForm.validateField('formUpload')
        callback()
      }
    }
    let formUpload2 = (rule, value, callback) => {
      if (this.isbankModal === false) {
        callback(new Error('请上传文件'))
      } else {
        this.$refs.ruleForm2.validateField('formUpload2')
        callback()
      }
    }
    return {
      signImgData: [],
      visibleImg: false,
      modalcolumns,
      modaldata: [],
      visibleDelete: false,
      formDelete: {
        content: ''
      },
      wageModal: false,
      bankModal: false,
      visibleUpload1: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form: {
        fileInfoList: [],
        ulfileInfoList: [],
        packageId: ''
      },
      formBank: {
        fileInfoList: [],
        ulfileInfoList: [],
        packageId: '',
        date: moment(new Date())
      },
      defaultFileList: [],
      defaultFileList2: [],
      iswageModal: false,
      isbankModal: false,
      modalTitle: '凭证登记',
      flag: true,
      rules: {
        formUpload: [{ required: true, validator: formUpload, trigger: 'change' }]
      },
      rules2: {
        formUpload2: [{ required: true, validator: formUpload2, trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }]
      },
      current: 1,
      pageSize: 10,
      total: 1,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      visiblePdf: false,
      pdfUrl: '',
      teamWageId: '',
      getData: {},
      spinning: false,
      visibleSign: false,
      handSignImg: ''
    }
  },
  mounted() {
    this.teamWageId = this.$route.query.id
    this.getTable()

    // this.getLeader()
  },
  methods: {
    moment,
    //点击签字图片
    signImgClick(data) {
      this.signImgData = []
      data.forEach((item) => {
        this.signImgData.push(item.fileUrl)
      })
      // console.log(this.signImgData);

      this.visibleImg = true
    },
    // 点击图片弹框确认
    handleOkImg() {
      this.visibleImg = false
    },
    // 点击手写签字图片弹框确认
    handleOkSignImg() {
      this.visibleSign = false
    },
    // 点击手写签字图片显示弹框

    onSignImg(val) {
      this.handSignImg = val
      this.visibleSign = true
    },
    //手动录入时
    noImg() {
      this.$message.destroy()
      this.$message.error('工资为手动录入数据，无签字照片')
    },
    //获取表格信息
    getTable() {
      this.form.ulfileInfoList = []
      this.form.fileInfoList = []
      this.formBank.ulfileInfoList = []
      this.formBank.fileInfoList = []
      let data = {
        id: this.teamWageId,
        page: this.current,
        size: this.pageSize
      }
      teamWageGet(data).then((res) => {
        this.getData = res.data.data
        // console.log(this.getData)
        this.getData.certificatesVOList.forEach((item, index) => {
          if (item.type == 1) {
            let file = { name: '', url: '', status: 'done', uid: '' }
            file.name = item.fileName
            file.url = item.fileUrl
            file.uid = item.id
            this.form.ulfileInfoList.push(file)
          } else {
            let file = { name: '', url: '', status: 'done', uid: '' }
            file.name = item.fileName
            file.url = item.fileUrl
            file.uid = item.id
            this.formBank.ulfileInfoList.push(file)
          }
        })
        // console.log(this.form.ulfileInfoList);
        this.form.fileInfoList = JSON.parse(JSON.stringify(this.form.ulfileInfoList))
        this.formBank.fileInfoList = JSON.parse(JSON.stringify(this.formBank.ulfileInfoList))
        this.defaultFileList = JSON.parse(JSON.stringify(this.form.ulfileInfoList))
        this.defaultFileList2 = JSON.parse(JSON.stringify(this.formBank.ulfileInfoList))
        // console.log(this.defaultFileList)
        this.modaldata = []
        this.getData.personWageVOList.forEach((item, index) => {
          item.key = item.id
          item.order = index + 1
          if (item.contractType == '1') {
            item.contractType = '月薪'
          } else {
            item.contractType = '日薪'
          }
          this.modaldata.push(item)
        })
      })
    },
    returnBack() {
      this.$router.push({ path: '/migrantWages/unitAccount' })
    },
    handleButtonClick(e) {},
    handleMenuClick(e) {
      //   if (e.key == 1) {
      //     this.visible2 = true
      //   }
      if (e.key == 2) {
        this.visibleDelete = true
      }
      // console.log('删除', e)
    },
    checkDelete() {
      if (this.formDelete.content == this.getData.teamName) {
        this.visibleDelete = false
        teamWageDelete({ id: this.getData.id }).then((res) => {
          this.$message.success('删除成功')
          this.$router.push({ path: '/migrantWages/unitAccount' })
        })
      } else {
        this.$message.error('内容输入错误')
      }
    },
    showModal() {
      this.form.fileInfoList = []
      this.defaultFileList = []
      this.modalTitle = '凭证登记'
      this.visibleUpload1 = true
      this.form.packageId = ''
      this.flag = true
    },
    showModal2() {
      this.formBank.fileInfoList = []
      this.defaultFileList2 = []
      this.modalTitle = '银行支付凭证'
      this.visibleUpload1 = true
      this.formBank.packageId = ''
      this.flag = true
    },
    handleWage(e) {
      if (e.key == 1) {
        if (this.getData.payStatus != 1) {
          this.modalTitle = '凭证登记'
          this.defaultFileList = JSON.parse(JSON.stringify(this.form.ulfileInfoList))
          if (this.defaultFileList.length > 0) {
            this.iswageModal = true
          }
          this.visibleUpload1 = true
        } else {
          this.$message.destroy()
          this.$message.error('已上传银行支付凭证，工资确认单不能修改')
        }
      }
      if (e.key == 2) {
        // console.log(222);

        let data = {
          fileList: [],
          teamWageSheetId: this.getData.id,
          type: '1',
          wageMonth: this.getData.wageMonth,
          wagePayId: this.getData.wagePayId
        }
        teamWageUpload(data).then((res) => {
          this.$message.success('删除成功')
          this.getTable()
        })
        this.wageModal = false
      }
    },
    handleBank(e) {
      if (e.key == 1) {
        this.modalTitle = '银行支付凭证'
        // console.log(this.formBank.fileInfoList);
        //
        this.defaultFileList2 = JSON.parse(JSON.stringify(this.formBank.ulfileInfoList))
        if (this.defaultFileList2.length > 0) {
          this.isbankModal = true
        } else {
          this.isbankModal = false
        }
        this.visibleUpload1 = true
      }
      if (e.key == 2) {
        let data = {
          fileList: [],
          teamWageSheetId: this.getData.id,
          type: '2',
          wageMonth: this.getData.wageMonth,
          wagePayId: this.getData.wagePayId
        }
        teamWageUpload(data).then((res) => {
          this.$message.success('删除成功')
          this.getTable()
        })
        this.bankModal = false
      }
    },
    handCancel(e) {
      if (this.modalTitle == '凭证登记') {
        if (this.form.fileInfoList.length == 0) {
          this.visibleUpload1 = false
          this.wageModal = false
        }
        this.getTable()
      } else {
        if (this.formBank.fileInfoList.length == 0) {
          this.visibleUpload1 = false
          this.bankModal = false
        }
        this.getTable()
      }
    },
    pdfModal(value) {
      // console.log(value);
      this.pdfUrl = value.url
      this.visiblePdf = true
    },
    handleOkPdf() {
      this.visiblePdf = false
    },
    handleOk(e) {
      if (this.modalTitle == '凭证登记') {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let fileList = []
            this.form.fileInfoList.forEach((item) => {
              let file = { fileName: '', fileUrl: '' }
              file.fileName = item.name
              file.fileUrl = item.url
              fileList.push(file)
            })
            let data = {
              fileList: fileList,
              teamWageSheetId: this.getData.id,
              type: '1',
              wageMonth: this.getData.wageMonth,
              wagePayId: this.getData.wagePayId
            }
            if (this.form.fileInfoList.length != 0) {
              this.wageModal = true
              this.iswageModal = true
              this.flag = false
            }
            if (this.spinning == false) {
              teamWageUpload(data).then((res) => {
                this.$message.success('上传成功')
                this.visibleUpload1 = false
                this.getTable()
              })
            }
          } else {
            return false
          }
        })
      } else {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            let fileList = []
            // console.log(this.formBank.fileInfoList)

            this.formBank.fileInfoList.forEach((item) => {
              let file = { fileName: '', fileUrl: '' }
              file.fileName = item.name
              file.fileUrl = item.url
              fileList.push(file)
            })
            let data = {
              fileList: fileList,
              teamWageSheetId: this.getData.id,
              type: '2',
              wageMonth: this.getData.wageMonth,
              wagePayId: this.getData.wagePayId,
              payDate: moment(this.formBank.date).format('YYYY-MM-DD')
            }
            if (this.formBank.fileInfoList.length != 0) {
              this.bankModal = true
              this.isbankModal = true
              this.flag = false
            }
            if (this.spinning == false) {
              teamWageUpload(data).then((res) => {
                this.visibleUpload1 = false
                this.$message.success('上传成功')
                this.getTable()
              })
            }
          } else {
            return false
          }
        })
      }
    },

    handleRemove(file) {
      // console.log(file.uid)
      if (this.modalTitle == '凭证登记') {
        this.form.fileInfoList.forEach((item, index) => {
          if (file.uid == item.uid) {
            this.form.fileInfoList.splice(index, 1)
          }
        })
        if (this.form.fileInfoList.length != 0) {
          this.iswageModal = true
        } else {
          this.iswageModal = false
        }
      } else {
        this.formBank.fileInfoList.forEach((item, index) => {
          if (file.uid == item.uid) {
            this.formBank.fileInfoList.splice(index, 1)
          }
        })
        if (this.formBank.fileInfoList.length != 0) {
          this.isbankModal = true
        } else {
          this.isbankModal = false
        }
      }
      // this.form.fileInfoList
    },

    beforeUpload(file) {
      // console.log(file)
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取文件
      // if (this.modalTitle != '编辑凭证登记' && this.flag == true) {
      //   this.form.packageId = file.uid
      //   this.flag = false
      // }
      reader.onload = (data) => {
        //  console.log(file.uid)
        this.uploadFile(data.target.result, file.name, file.uid, this.form.packageId)
      }
      if (this.modalTitle == '凭证登记') {
        this.iswageModal = true
      } else {
        this.isbankModal = true
      }
      this.spinning = true
      return false
    },
    uploadFile(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        let obj = { url: fileUrl, name: fileName, uid: fileUid, status: 'done' }
        if (this.modalTitle == '凭证登记') {
          this.form.fileInfoList.push(obj)
        } else {
          this.formBank.fileInfoList.push(obj)
        }
        this.$message.success(`${fileName} 上传成功`, 1)
        this.spinning = false
      })
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTable()
    },

    exportTable() {
      let data = {
        // orgPersonId: '',
        // page: this.current,
        // size: this.pageSize,
        // source: this.getData.source,
        sheetId: this.getData.id
        // teamName: this.getData.teamName,
        // wageMonth: this.getData.wageMonth
      }
      window.open(
        process.env.VUE_APP_BASE_API + '/v1/personWage/export?sheetId=' + this.getData.id,
        //  +
        // '&wageMonth=' +
        // this.getData.wageMonth +
        // '&source=' +
        // this.getData.source
        '_blank'
      )
      // teamWageExport(data).then((res) => {
      //   this.$message.success('导出成功')
      // })
    },
    pdfDelete(uid) {
      let findVal = this.form.fileInfoList.findIndex((item) => {
        return item.uid === uid
      })
      // console.log(findVal)

      this.form.fileInfoList.splice(findVal, 1)
      if (this.form.fileInfoList.length != 0) {
        // this.isUpload = true
        this.iswageModal = true
      } else {
        this.iswageModal = false
      }
    },
    pdfDelete2(uid) {
      let findVal = this.formBank.fileInfoList.findIndex((item) => {
        return item.uid === uid
      })
      // console.log(findVal)

      this.formBank.fileInfoList.splice(findVal, 1)
      if (this.formBank.fileInfoList.length != 0) {
        // this.isUpload = true
        this.isbankModal = true
      } else {
        this.isbankModal = false
      }
    },
    //跳到人员详情
    onDetail(text) {
      // console.log(text);

      const { href } = this.$router.resolve({
        path: `/personnelInformationLabor/${text.orgPersonId}`,
        query: { id: text.orgPersonId }
      })
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang='less'>
.teamPayroll {
  font-family: 'PingFang SC Bold', 'PingFang SC';
}
.breadcrumb {
  padding: 5px;
  // background: #fff;
  margin-bottom: 10px;
  padding-left: 0;
  /* transform: translate(0px, 0px); */
  /* margin-left: 15px; */
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 20px 30px;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ccc;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.title {
  background: #fff;
  padding: 15px 30px;
  margin-bottom: 20px;
  color: #000;
}
.title_top {
  margin-bottom: 10px;
}
.flexBetween {
  align-items: center;
}
.content {
  background: #fff;
  color: #000;
  padding-bottom: 10px;
}
.content_title {
  font-size: 18px;
  font-weight: 600;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border-bottom: 1px solid #ccc;
  padding: 10px 30px;
  margin-bottom: 20px;
}
.modalTitle,
.modalTable {
  margin-bottom: 15px;
}
.atable {
  padding: 10px 30px;
  background: #fff;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.flexBetween1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wageCheck,
.bankPay {
  padding: 10px 30px;
  background: #fff;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
  position: relative;
}
.uploadTittle {
  margin-bottom: 20px;
}
.uploadContent {
  text-align: center;
}
.uploadContent div:nth-of-type(1) {
  margin-bottom: 10px;
}
.tipWord {
  border: 1px solid rgba(255, 229, 143, 1);
  border-radius: 4px;
  background: rgba(255, 251, 230, 1);
  padding: 16px 20px;
  margin-bottom: 30px;
}
.imgFlag {
  position: absolute;
  right: 0;
  top: 0;
}

.uploadList {
  ul,
  li {
    list-style: none;
    font-size: 16px;
    font-weight: 400;
  }
  ul {
    width: 100%;
    min-height: 40px;
    padding-bottom: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  li {
    // flex: 1;
    width: 30%;
    height: 30px;
    // float: left;
    margin-right: 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
  }
  li {
    color: #1890ff;
    cursor: pointer;
  }
}
.uploadList {
  position: relative;
  padding-bottom: 20px;
}
.pagination {
  padding: 15px 30px;
  background: #fff;
  padding-top: 5px;
}
.pdfModal {
  ::v-deep .ant-modal {
    width: 1080px !important;
    // top: 20px;
  }
}
.pdfModal ::v-deep .ant-modal-body {
  padding: 40px;
  text-align: center;
  height: 780px;
}
.delete:hover {
  color: #1890ff;
  cursor: pointer;
}
.pdfList {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin: 7px 0px;
}
::v-deep .ant-upload.ant-upload-select {
  width: 100%;
}
::v-deep .ant-modal {
  padding-bottom: 0;
}
.signImgModal ::v-deep .ant-modal-body {
  padding-left: 0;
  padding-right: 0;
}
.ant-carousel ::v-deep .slick-slide {
  text-align: center;
  // background: #364d79;
  overflow: hidden;
}

.ant-carousel ::v-deep .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel ::v-deep .custom-slick-arrow:before {
  display: none;
}
.ant-carousel ::v-deep .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel ::v-deep .slick-slide h3 {
  color: #fff;
}
</style>
